import React, { Component } from 'react';
import Taro ,{getCurrentInstance} from '@tarojs/taro';
import { AtCheckbox } from 'taro-ui'
import { View, Image, Text,Button} from '@tarojs/components'
import { updateViewLog,updateShareLog,getJihuasuanGoodsView,getJihuasuanView} from '@/api/distribution'
import { connect } from 'react-redux'
import { AtModal,AtModalAction,AtModalHeader  } from "taro-ui"
import './index.scss'


interface State {
  list: object,
  storeCode:string,
  jihuasuanId:string,
  id:string,
  pMobile:string,
  ppMobile:string,
  jihuasuanGoodsId:string,
  jihuasuanSource:string,
  detail:object
  bgImg:string
  mostReward:string
	checkedList:any
	checkboxOption:object
	tips:boolean
	isDeleted:string | number
}
@connect<any>(({ car }) => ({
	car: car.carInfo.currentCar,
}))
export default class Index extends Component {
  $instance = getCurrentInstance();
  constructor(props) {
    super(props)
    this.state = {
			tips:false,
      jihuasuanId:'',
      id:'',
      pMobile:'',
      ppMobile:'',
      storeCode:'',
      jihuasuanGoodsId:'',
      jihuasuanSource:'',
      jihuasuanStoreCode:'',
      mostReward:'',
      bgImg:'',
      detail:{},
      list:{},
			checkedList: [1],
			checkboxOption : [{
        value: 1,
        label: '',
        desc: ''
      }],
			isDeleted:''
    }
  }

  state: State

  onShareAppMessage() {
    let {
      jihuasuanId,
      pMobile,
      id,
      mostReward,
      // ppMobile,
      jihuasuanGoodsId,
      jihuasuanSource,
      storeCode
    } = this.$instance.router.params
    let IS_USERINFO = Taro.getStorageSync('IS_USERINFO')
    let currentMobile = IS_USERINFO.mobile
    let data = {}
    // 集划算分享接口
    this.updateShareLog()
    let {list} = this.state
    let {referName,referUploadUrl} = list
    data = {
      imageUrl:referUploadUrl,
      title: `${referName}`,
      path:`/pages/annual/details/index?id=${id}&mostReward=${mostReward}&jihuasuanId=${jihuasuanId}&pMobile=${currentMobile}&ppMobile=${pMobile}&jihuasuanGoodsId=${jihuasuanGoodsId}&jihuasuanSource=${jihuasuanSource}${storeCode ? `&storeCode=${storeCode}` : ''}`
    }
    console.log('分享数据----data',data)
    return data
  }
  getJihuasuanView(){
    let {
      jihuasuanId,
      jihuasuanGoodsId,
    } = this.$instance.router.params
    getJihuasuanView({
      id:jihuasuanId
    }).then(res=>{
      let goods = res.data.data.goods
      let list = {}
      for(var i=0;i<goods.length;i++){
        if(goods[i].type==2 && goods[i].id==jihuasuanGoodsId){
          list = goods[i]
        }
      }
      console.log('list',list)
      this.setState({
        detail:res.data.data,
        list,
      },()=>{
				if(res.data.data.activityStatus!=1){
					this.setState({
						tips:true
					})
					return
				}


			})

    })
  }
  getJihuasuanGoodsView(){
    let {
      id,
      jihuasuanGoodsId,
    } = this.$instance.router.params
    getJihuasuanGoodsView({
      id:jihuasuanGoodsId
    }).then(res=>{
      let detailUploadUrl = res.data.data.detailUploadUrl
      this.setState({
        bgImg:detailUploadUrl,
				isDeleted:res.data.data.isDeleted
      })
			if(res.data.data.isDeleted == 1){
				this.setState({
					tips:true
				})
			}
    })
  }


  // 集划算浏览接口
  updateViewLog(){
    let IS_USERINFO = Taro.getStorageSync('IS_USERINFO')
    let {jihuasuanId,pMobile,ppMobile,jihuasuanGoodsId,jihuasuanSource} = this.$instance.router.params
    let mobile = IS_USERINFO.mobile
    let params = {
      mobile,
      jihuasuanId,
      pMobile,
      ppMobile,
      jihuasuanGoodsId,
      source:jihuasuanSource
    }
    updateViewLog(params).then(res => {
      console.log('updateViewLog',res)
    }).catch((err)=>{
      console.log('err',err)
    })
  }

  // 集划算分享接口
  updateShareLog(){
    let IS_USERINFO = Taro.getStorageSync('IS_USERINFO')
    let {jihuasuanId,pMobile,ppMobile,jihuasuanGoodsId,jihuasuanSource} = this.$instance.router.params
    let mobile = IS_USERINFO.mobile
    let params = {
      mobile,
      jihuasuanId,
      pMobile,
      ppMobile,
      jihuasuanGoodsId,
      source:jihuasuanSource
    }
    updateShareLog(params).then(res => {
      console.log('updateShareLog',res)
    }).catch((err)=>{
      console.log('err',err)
    })
  }


  UNSAFE_componentWillMount() { }
  componentDidMount() {
    let {
      mostReward,
      jihuasuanId,
      id,
      pMobile,
      ppMobile,
      jihuasuanGoodsId,
      storeCode,
      jihuasuanSource} = this.$instance.router.params
    this.setState({
      jihuasuanId,
      id,
      pMobile,
      ppMobile,
      jihuasuanGoodsId,
      jihuasuanSource,
      mostReward,
      storeCode
    },()=>{
      this.getJihuasuanView()
      this.getJihuasuanGoodsView()
    })
    console.log('this',this)
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }

  onReachBottom() {

  }
  share(){}

  buy=()=>{
    console.log('执行了吗')
		let {checkedList} = this.state
		if(checkedList.length !==1){
			 Taro.showToast({
        title: '请先勾选并确认阅读《活动规则》。',
        icon: 'none',
        duration: 1800
      })
			return
		}
    let {
      storeCode,
      jihuasuanId,
      id,
      pMobile='',
      ppMobile='',
      jihuasuanGoodsId,
      jihuasuanSource=0
    } = this.state
    console.log('pMobile',pMobile)
    Taro.navigateTo({
     url:`/pages/order/index/index?annualCardId=${id}&type=1&jihuasuanId=${jihuasuanId}&pMobile=${pMobile}&ppMobile=${ppMobile}&jihuasuanGoodsId=${jihuasuanGoodsId}&jihuasuanSource=${jihuasuanSource}${storeCode ? `&storeCode=${storeCode}` : ''}`
    })
  }

	handleChange=(e)=>{
		console.log(e)
		this.setState({
			checkedList:e
		})
	}

	  /**
   * 如何赚钱
  * **/
		handleHow() {
			Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/cheap/tutorial'}`})
		}

		/**
   * 如何赚钱
  * **/
		 handleUser() {
			Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/cheap/user'}`})
		}

		/**
   * 如何赚钱
  * **/
		 handleRule=()=> {
			let {
				jihuasuanId,
			} = this.$instance.router.params
			console.log('this')
			let query = {
				jihuasuanId: jihuasuanId
			}
			Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/cheap/activity-rule'}&query=${JSON.stringify(query)}`})
		}


  render() {
    const { isDeleted,detail,tips,jihuasuanGoodsId,list,bgImg,mostReward,checkboxOption,checkedList} = this.state
    console.log('bgImg',bgImg)
    console.log('list',list)
    console.log('detail',detail)
    const {activityStatus} = detail
		console.log('activityStatus',activityStatus)
    return (
      <View className="body" >
				<View>
					<Image src={bgImg} className="pic" mode='widthFix'></Image>
				</View>
				<View className='read'>
				<AtCheckbox
					options={checkboxOption}
					selectedList={checkedList}
					onChange={(e)=>this.handleChange(e)}
				/>
			<Text className='t1'><Text className='t3'>我已经阅读相关</Text></Text><Text className='t2' onClick={this.handleRule}>《活动规则》</Text>
					</View>
        <View className="d-contain">
          <View className="fixed-oprate">
						<View className='how' onClick={this.handleHow}>如何赚钱？</View>
						<View className='opr-r'>
							<Button openType="share" className="share-btn">分享赚￥{mostReward}</Button>
							<View onClick={this.buy} className="buy-btn">立即购买</View>
						</View>
          </View>
        </View>



				<AtModal isOpened={tips} closeOnClickOverlay={false}>
					<AtModalHeader>很抱歉，你来晚了</AtModalHeader>
					<View className='at-tips'>
							<View>{activityStatus == 0 ? '活动时间已结束，' : (isDeleted == 1 ? '年卡不存在，': '')}，感谢您的支持</View>
							<View>看看其他活动发现更多福利哦！</View>
					</View>
					<AtModalAction>  <Button onClick={this.handleUser}>查看其他活动</Button> </AtModalAction>
				</AtModal>
      </View>
    )
  }
}
